<template>
  <div class="mycontribution-container">
      <div class="contBox">
        <el-row :gutter="20">
          <el-col class="box_col" :span="8" v-for="item in 4" :key="item">
            <el-card :body-style="{ padding: '0px', height: '230px'}">
                <div class="card_box">
                  <div class="card_left">
                    <svg-icon icon-class="tree-table" class="top_icon"/>
                  </div>
                  <div class="card_right">
                    <h3>本月完成任务</h3>
                    <h1 style="color: blue;">23</h1>
                  </div>
                </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>

export default {
  name: 'mycontribution',
  components: {
    
  },
  data() {
    return {
      
    }
  },
  mounted() {
    
  },
  methods: {
    
  }
}
</script>
<style scoped lang="scss">
  .contBox{
    width: 90%;
    margin: 0 auto;

    .box_col{
      height: 300px;
      .card_box{
        display: flex;
        align-items: center;
      }
      .card_left{
        width: 40%;
        height: 100%;
        // border-right: red 1px solid;
        text-align: center;
        line-height: 200px;
        .top_icon{
         font-size: 60px;
          color: #115efd;
          
        }
      }
      .card_right{
         width: 60%;
         height: 100%;
         text-align: center;
      }
    }
  }

</style>

